(function () {
  // mock数据

  /**
   * 思路
   * 1. 复选框的关联操作
   *    1.1 全选 全选事件的绑定
   *    1.2 获取他的选中状态
   *    1.3 将选中状态赋值给其他所有的input checkbox
   *    1.4 处理tbody下面的复选框
   *    1.5 通过事件委托的形式为每一个input checkbox添加事件的绑定
   * 2. 表格排序的实现
   *    2.1 事件的绑定
   *    2.2 在绑定的事件中获得一个当前点击的index数据，用来判断要对哪一列进行排序。
   */

  const mockData = [
    {
      id: 1,
      name: "函数提取",
      age: "⭐️⭐️⭐️⭐️⭐️",
      grade: "如何提取函数",
      desc: "1.初始化函数\n2.事件初始化",
    },
    {
      id: 2,
      name: "李雷",
      age: 17,
      grade: "一年级",
      desc: "李雷是17岁，当前一年级学生",
    },
    {
      id: 3,
      name: "韩梅梅",
      age: 19,
      grade: "二年级",
      desc: "韩梅梅是19岁，当前二年级学生",
    },
    {
      id: 4,
      name: "张强",
      age: 20,
      grade: "三年级",
      desc: "张强是20岁，当前三年级学生",
    },
  ];
  // 设置数据 渲染到界面上
  function setData(data) {
    var tbody = document.querySelector("tbody");
    data.map((item) => {
      var td = document.createElement("td");
      const tr = document.createElement("tr");
      const check = document.createElement("input");
      check.setAttribute("type", "checkbox");
      check.className = "checkbox";
      td.appendChild(check);
      tr.appendChild(td);
      for (let i in item) {
        var td = document.createElement("td");
        td.innerText = item[i];
        tr.appendChild(td);
      }
      tbody.appendChild(tr);
    });
  }
  setData(mockData);

  var tHeads = document.querySelectorAll("thead tr th");
  var tbody = document.querySelector("tbody");
  var tbodyChecks = tbody.querySelectorAll("input");
  var checkboxAll = document.querySelector("#checkbox-all");

  function initEvent() {
    checkboxAll.parentNode.addEventListener("click", handleCheckAllClick);
    tbody.addEventListener("click", handleSubCheckClick);
    Array.prototype.slice.apply(tHeads).map((th, index) => {
      if (index === 0) return;
      th.addEventListener("click", function (e) {
        handleThClick(e, index);
      });
    });
  }

  /**
   * 头部全选按钮
   */
  function handleCheckAllClick(e) {
    if (e.target.children[0].tagName === "INPUT") {
      e.target.children[0].checked = !e.target.children[0].checked;
    }
    for (var i = 0; i < tbodyChecks.length; i++) {
      tbodyChecks[i].checked = checkboxAll.checked;
    }
  }
  /**
   * tbody 里面的选中按钮
   * @param {*} e
   */
  function handleSubCheckClick(e) {
    if (
      e.target.tagName !== "INPUT" &&
      [e.target.children]?.[0].tagName !== "INPUT"
    )
      return;
    if (e.target.tagName !== "INPUT") {
      e.target.children[0].checked = !e.target.children[0].checked;
    }
    var checkedNum = 0;
    for (var i = 0; i < tbodyChecks.length; i++) {
      tbodyChecks[i].checked && checkedNum++;
    }
    checkboxAll.checked = checkedNum === tbodyChecks.length;
  }

  /**
   * 给表头th添加事件
   * @param {*} e
   * @param {*} index
   */
  function handleThClick(e, index) {
    console.log(e.target, index);
    // 获取指定的tr 的td
    Array.prototype.slice
      .apply(tbody.querySelectorAll("tr"))
      .sort((a, b) => {
        if (isNaN(a.children[index].innerText)) {
          return a.children[index].innerText.localeCompare(
            b.children[index].innerText,
            "zh"
          );
        } else {
          return a.children[index].innerText - b.children[index].innerText;
        }
      })
      .map((item) => tbody.appendChild(item));
  }

  initEvent();
})();
